<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-lx-emoji"/> 自定义图标</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <h2>使用方法</h2>
      <p style="line-height: 50px;">
        直接通过设置类名为 el-icon-lx-iconName 来使用即可。例如：（共{{iconList.length}}个图标）
      </p>
      <p class="example-p">
        <i class="el-icon-lx-redpacket_fill" style="font-size: 30px;color: #ff5900"/>
        <span>&lt;i class=&quot;el-icon-lx-redpacket_fill&quot;&gt;&lt;/i&gt;</span>
      </p>
      <p class="example-p">
        <i class="el-icon-lx-weibo" style="font-size: 30px;color:#fd5656"/>
        <span>&lt;i class=&quot;el-icon-lx-weibo&quot;&gt;&lt;/i&gt;</span>
      </p>
      <p class="example-p">
        <i class="el-icon-lx-emojifill" style="font-size: 30px;color: #ffc300"/>
        <span>&lt;i class=&quot;el-icon-lx-emojifill&quot;&gt;&lt;/i&gt;</span>
      </p>
      <br>
      <h2>图标</h2>
      <div class="search-box">
        <el-input class="search" size="large" v-model="keyword" clearable placeholder="请输入图标名称"/>
      </div>
      <ul>
        <li class="icon-li" v-for="(item,index) in list" :key="index">
          <div class="icon-li-content">
            <i :class="`el-icon-lx-${item}`"/>
            <span>{{item}}</span>
          </div>
        </li>
      </ul>
    </div>

  </div>
</template>

<script>
  export default {
    data: function() {
      return {
        keyword: '',
        iconList: [
          'attentionforbid',
          'attentionforbidfill',
          'attention',
          'attentionfill',
          'tag',
          'tagfill',
          'people',
          'peoplefill',
          'notice',
          'noticefill',
          'mobile',
          'mobilefill',
          'voice',
          'voicefill',
          'unlock',
          'lock',
          'home',
          'homefill',
          'delete',
          'deletefill',
          'notification',
          'notificationfill',
          'notificationforbidfill',
          'like',
          'likefill',
          'comment',
          'commentfill',
          'camera',
          'camerafill',
          'warn',
          'warnfill',
          'time',
          'timefill',
          'location',
          'locationfill',
          'favor',
          'favorfill',
          'skin',
          'skinfill',
          'news',
          'newsfill',
          'record',
          'recordfill',
          'emoji',
          'emojifill',
          'message',
          'messagefill',
          'goods',
          'goodsfill',
          'crown',
          'crownfill',
          'move',
          'add',
          'hot',
          'hotfill',
          'service',
          'servicefill',
          'present',
          'presentfill',
          'pic',
          'picfill',
          'rank',
          'rankfill',
          'male',
          'female',
          'down',
          'top',
          'recharge',
          'rechargefill',
          'forward',
          'forwardfill',
          'info',
          'infofill',
          'redpacket',
          'redpacket_fill',
          'roundadd',
          'roundaddfill',
          'friendadd',
          'friendaddfill',
          'cart',
          'cartfill',
          'more',
          'moreandroid',
          'back',
          'right',
          'shop',
          'shopfill',
          'question',
          'questionfill',
          'roundclose',
          'roundclosefill',
          'roundcheck',
          'roundcheckfill',
          'global',
          'mail',
          'punch',
          'exit',
          'upload',
          'read',
          'file',
          'link',
          'full',
          'group',
          'friend',
          'profile',
          'addressbook',
          'calendar',
          'text',
          'copy',
          'share',
          'wifi',
          'vipcard',
          'weibo',
          'remind',
          'refresh',
          'filter',
          'settings',
          'scan',
          'qrcode',
          'cascades',
          'apps',
          'sort',
          'searchlist',
          'search',
          'edit'
        ]
      };
    },
    computed: {
      list() {
        return this.iconList.filter((item) => {
          return item.indexOf(this.keyword) !== -1;
        });
      }
    }
  };
</script>

<style scoped>
  .example-p {
    height: 45px;
    display: flex;
    align-items: center;
  }

  .search-box {
    text-align: center;
    margin-top: 10px;
  }

  .search {
    width: 300px;
  }

  ul, li {
    list-style: none;
  }

  .icon-li {
    display: inline-block;
    padding: 10px;
    width: 120px;
    height: 120px;
  }

  .icon-li-content {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .icon-li-content i {
    font-size: 36px;
    color: #606266;
  }

  .icon-li-content span {
    margin-top: 10px;
    color: #787878;
  }
</style>